<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="lib/vue.js"></script>
		<script src="https://unpkg.com/tween.js@16.3.4"></script>
		<script src="https://unpkg.com/color-js@1.0.3/color.js"></script>
	</head>
	<body>
		<div id="color-watch">
			<input type="text" v-model="colorQuery" v-on:keyup.enter="updateColor" placeholder="Enter a color"/>
			<button v-on:click="updateColor">Update</button>
			<p>Preview:</p>
			<span v-bind:style="{backgroundColor:tweenedCSSColor}" class="color-preview"></span>
			<p>{{tweenedCSSColor}}</p>
		</div>
	</body>
	<script type="text/javascript">
		var Color = net.brehaut.Color
		new Vue({
			el:'#color-watch',
			data:{
				colorQuery:'',
				color:{
					red:0,
					green:0,
					blue:0,
					alpha:1
				},
				tweenedColor:{}
			},
			created:function(){
				this.tweenedColor = Object.assign({},this.color)
			},
			watch:{
				color:function(){
					function animate (time) {
						requestAnimationFrame(animate)
						TWEEN.update(time)
					}
					new TWEEN.Tween(this.tweenedColor)
					.to(this.color,750)
					.start()
					animate()
				}
			},
			computed:{
				tweenedCSSColor:function(){
					return new Color({
						red: this.tweenedColor.red,
						green: this.tweenedColor.green,
						blue: this.tweenedColor.blue,
						alpha: this.tweenedColor.alpha
					}).toCSS()
				}
			},
			methods:{
				updateColor:function(){
					this.color=new Color(this.colorQuery).toRGB()
					this.colorQuery=''
				}
			}
		});
	</script>
	<style type="text/css">
		.color-preview{
			display: block;
			width:50px;
			height:50px;
		}
	</style>
</html>
